<route lang="json5" type="payList">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '',
    enablePullDownRefresh:false,
    onReachBottomDistance:50,
  },
}
</route>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from 'vue'
import { getPayList } from '@/api/device'

const type = ref('1') // 1:微信登录授权 2:经营报表通知 3:设备状态通知 4:支付投诉通知
onLoad((options: any) => {
  switch (options.type) {
    case '1':
      uni.setNavigationBarTitle({
        title: '用户登录 > 微信授权',
      })
      type.value = '1'
      break
    case '2':
      uni.setNavigationBarTitle({
        title: '经营报表通知 > 微信授权',
      })
      type.value = '2'
      break
    case '3':
      uni.setNavigationBarTitle({
        title: '设备状态通知 > 微信授权',
      })
      type.value = '3'
      break
    case '4':
      uni.setNavigationBarTitle({
        title: '支付投诉通知 > 微信授权',
      })
      type.value = '4'
      break
    default:
      uni.setNavigationBarTitle({
        title: '用户登录 > 微信授权',
      })
      type.value = '1'
      break
  }
  if (options.type) {
    type.value = options.type
  }
})
const loadState = ref<'loading' | 'error' | 'finished'>('loading')
const page = ref(1)
const dataList = ref([]) // 列表数据
const total = ref(50) // 总数据量
function loadMore() {
  console.log('滚动到底部加载更多数据')
  if (loadState.value === 'finished') {
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}
onLoad(() => {
  loadMore()
})
onReachBottom(() => {
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})

const selectGroup = ref([])
</script>

<template>
  <view class="bottom-btn-pd">
    <view class="wot-list-top-wrap">
      <view class="wot-row wot-title">
        <wd-row>
          <wd-col :span="5">
            <view class="wot-item">
              选择
            </view>
          </wd-col>
          <wd-col :span="5">
            <view class="wot-item">
              名称
            </view>
          </wd-col>
          <wd-col :span="7">
            <view class="wot-item">
              账号
            </view>
          </wd-col>
          <wd-col :span="7">
            <view class="wot-item">
              状态
            </view>
          </wd-col>
        </wd-row>
      </view>
    </view>
    <view v-if="dataList.length === 0" class="pt-20">
      <wd-status-tip image="content" tip="暂无内容" />
    </view>
    <view v-else class="wot-list">
      <wd-checkbox-group v-model="selectGroup">
        <view v-for="(item, index) in dataList" :key="index" class="wot-row">
          <wd-row>
            <wd-col :span="5">
              <view class="wot-item">
                <wd-checkbox :model-value="index" />
              </view>
            </wd-col>
            <wd-col :span="5">
              <view class="wot-item">
                <wd-tag custom-class="tag" bg-color="#7232dd">
                  test
                </wd-tag>
              </view>
            </wd-col>
            <wd-col :span="7">
              <view class="wot-item">
                <wd-tag custom-class="tag" plain>
                  2734827329
                </wd-tag>
              </view>
            </wd-col>
            <wd-col :span="7">
              <view class="wot-item">
                <wd-tag v-if="index % 2 === 0" custom-class="space" type="success">
                  允许登录
                </wd-tag>
                <wd-tag v-else custom-class="space" type="warning">
                  禁止登录
                </wd-tag>
              </view>
            </wd-col>
            <wd-col :span="24">
              <view class="px-40rpx text-24rpx text-#C8C9CC">
                openid: oW_npwodO1F8szshwFAGcDh4kGPE
              </view>
            </wd-col>
          </wd-row>
        </view>
      </wd-checkbox-group>
      <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
      <view class="text-center">
        <wd-img :width="100" :height="100" src="https://wap.mch.yuntbq.com/static/images/gzh_wlyshfw.jpg" />
      </view>
      <view class="tips">
        <view>关注公众号才能收到通知</view>
        <view>注：此处勾选的微信账号即代表该微信将收到商户经营报告通知</view>
      </view>
    </view>
    <safe-bottom>
      <wd-button type="primary" size="small" block>
        绑定当前微信
      </wd-button>
    </safe-bottom>
  </view>
</template>

<style lang="scss" scoped>
#app {
  height: 100vh;
  overflow: hidden;
}
.confirm-btn {
  padding-top: 40rpx;
}
.tips{
    color:#ED6A0C;
    font-size: 30rpx;
    line-height: 40rpx;
    text-align: center;
    padding: 40rpx;
}
</style>
